
/* ==================
          布局
 ==================== */

/*  -- flex弹性布局 -- */

.flex {
  display: flex;
}

.basis-xs,.flex-20 {
  flex-basis: 20%;
}

.basis-sm,.flex-40 {
  flex-basis: 40%;
}

.basis-df,.flex-50 {
  flex-basis: 50%;
}

.basis-lg,.flex-60 {
  flex-basis: 60%;
}

.basis-xl,.flex-80 {
  flex-basis: 80%;
}

.flex-sub,.flex-1 {
  flex: 1;
}

.flex-twice,.flex-2 {
  flex: 2;
}

.flex-treble,.flex-3 {
  flex: 3;
}
.flex-4 {
  flex: 4;
}
.flex-5 {
  flex: 5;
}
.flex-6 {
  flex: 6;
}

.flex-direction {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.align-center {
  align-items: center;
}

.align-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-center {
  align-self: flex-center;
}

.self-end {
  align-self: flex-end;
}

.self-stretch {
  align-self: stretch;
}

.align-stretch {
  align-items: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

/* grid布局 */

.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid.grid-square {
  overflow: hidden;
}

.grid.grid-square .tien-tag {
  position: absolute;
  right: 0;
  top: 0;
  border-bottom-left-radius: 3px;
}

.grid.grid-square >.tien-col>text[class*="icon"] {
  font-size: 26px;
  position: absolute;
  color: #aaa;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.grid.grid-square > .tien-col {
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.grid.col-1.grid-square > .tien-col {
  padding-bottom: 100%;
  height: 0;
  margin-right: 0;
}

.grid.col-2.grid-square > .tien-col {
  padding-bottom: calc((100% - 10px)/2);
  height: 0;
  width: calc((100% - 10px)/2);
}

.grid.col-2.grid-square > .tien-col:nth-child(2n) {
  margin-right: 0;
}

.grid.col-3.grid-square > .tien-col {
  padding-bottom: calc((100% - 20px)/3);
  height: 0;
  width: calc((100% - 20px)/3);
}

.grid.col-3.grid-square > .tien-col:nth-child(3n) {
  margin-right: 0;
}

.grid.col-4.grid-square > .tien-col {
  padding-bottom: calc((100% - 30px)/4);
  height: 0;
  width: calc((100% - 30px)/4);
}

.grid.col-4.grid-square > .tien-col:nth-child(4n) {
  margin-right: 0;
}

.grid.col-5.grid-square > .tien-col {
  padding-bottom: calc((100% - 40px)/5);
  height: 0;
  width: calc((100% - 40px)/5);
}

.grid.col-1>.tien-col {
  width: 100%;
}

.grid.col-2>.tien-col {
  width: 50%;
}

.grid.col-3>.tien-col {
  width: 33.33%;
}

.grid.col-4>.tien-col {
  width: 25%;
}

.grid.col-5>.tien-col {
  width: 20%;
}

/*  -- 内外边距 -- */

.margin-0,.margin-no {
  margin: 0;
}

.margin-xs,.margin-5 {
  margin: 5px;
}

.margin-sm,.margin-10 {
  margin: 10px;
}

.margin,.margin-15 {
  margin: 15px;
}

.margin-lg,.margin-20 {
  margin: 20px;
}

.margin-xl,.margin-25 {
  margin: 25px;
}

.margin-top-xs,.margin-top-5 {
  margin-top: 5px;
}

.margin-top-sm,.margin-top-10 {
  margin-top: 10px;
}
.margin-top-no{
  margin-top:0;
}
.margin-top,.margin-top-15 {
  margin-top: 15px;
}

.margin-top-lg,.margin-top-20 {
  margin-top: 20px;
}

.margin-top-xl,.margin-top-25 {
  margin-top: 25px;
}

.margin-right-no{
  margin-right:0;
}
.margin-right-xs,.margin-right-5 {
  margin-right: 5px;
}

.margin-right-sm,.margin-right-10 {
  margin-right: 10px;
}

.margin-right,.margin-right-15 {
  margin-right: 15px;
}

.margin-right-lg,.margin-right-20 {
  margin-right: 20px;
}

.margin-right-xl,.margin-right-25 {
  margin-right: 25px;
}

.margin-bottom-no{
  margin-bottom:0;
}
.margin-bottom-xs,.margin-bottom-5 {
  margin-bottom: 5px;
}

.margin-bottom-sm,.margin-bottom-10 {
  margin-bottom: 10px;
}

.margin-bottom,.margin-bottom-15 {
  margin-bottom: 15px;
}

.margin-bottom-lg,.margin-bottom-20 {
  margin-bottom: 20px;
}

.margin-bottom-xl,.margin-bottom-25 {
  margin-bottom: 25px;
}

.margin-left-no{
  margin-left:0;
}
.margin-left-xs,.margin-left-5 {
  margin-left: 5px;
}

.margin-left-sm,.margin-left-10 {
  margin-left: 10px;
}

.margin-left,.margin-left-15 {
  margin-left: 15px;
}

.margin-left-lg,.margin-left-20 {
  margin-left: 20px;
}

.margin-left-xl,.margin-left-25 {
  margin-left: 25px;
}

.margin-lr-xs,.margin-lr-5 {
  margin-left: 5px;
  margin-right: 5px;
}

.margin-lr-sm,.margin-lr-10 {
  margin-left: 10px;
  margin-right: 10px;
}

.margin-lr ,.margin-lr-15{
  margin-left: 15px;
  margin-right: 15px;
}

.margin-lr-lg,.margin-lr-20 {
  margin-left: 20px;
  margin-right: 20px;
}

.margin-lr-xl,.margin-lr-25 {
  margin-left: 25px;
  margin-right: 25px;
}

.margin-tb-xs,.margin-tb-5 {
  margin-top: 5px;
  margin-bottom: 5px;
}

.margin-tb-sm,.margin-tb-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.margin-tb,.margin-tb-15 {
  margin-top: 15px;
  margin-bottom: 15px;
}

.margin-tb-lg,.margin-tb-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.margin-tb-xl,.margin-tb-25 {
  margin-top: 25px;
  margin-bottom: 25px;
}

.padding-0,.padding-no {
  padding: 0;
}

.padding-xs,.padding-5 {
  padding: 5px;
}

.padding-sm,.padding-10 {
  padding: 10px;
}

.padding,.padding-15 {
  padding: 15px;
}

.padding-lg,.padding-20 {
  padding: 20px;
}

.padding-xl,.padding-25 {
  padding: 25px;
}

.padding-top-xs,.padding-top-5 {
  padding-top: 5px;
}

.padding-top-sm,.padding-top-10 {
  padding-top: 10px;
}

.padding-top,.padding-top-15 {
  padding-top: 15px;
}

.padding-top-lg,.padding-top-20 {
  padding-top: 20px;
}

.padding-top-xl,.padding-top-25 {
  padding-top: 25px;
}

.padding-right-xs,.padding-right-top-5 {
  padding-right: 5px;
}

.padding-right-sm,.padding-right-top-10 {
  padding-right: 10px;
}

.padding-right,.padding-right-top-15 {
  padding-right: 15px;
}

.padding-right-lg,.padding-right-top-20 {
  padding-right: 20px;
}

.padding-right-xl,.padding-right-top-25 {
  padding-right: 25px;
}

.padding-bottom-xs,.padding-bottom-top-5 {
  padding-bottom: 5px;
}

.padding-bottom-sm,.padding-bottom-top-10 {
  padding-bottom: 10px;
}

.padding-bottom,.padding-bottom-top-15 {
  padding-bottom: 15px;
}

.padding-bottom-lg,.padding-bottom-top-20 {
  padding-bottom: 20px;
}

.padding-bottom-xl,.padding-bottom-top-25 {
  padding-bottom: 25px;
}

.padding-left-xs,.padding-left-top-5 {
  padding-left: 5px;
}

.padding-left-sm,.padding-left-top-10 {
  padding-left: 10px;
}

.padding-left,.padding-left-top-15 {
  padding-left: 15px;
}

.padding-left-lg,.padding-left-top-20 {
  padding-left: 20px;
}

.padding-left-xl,.padding-left-top-25 {
  padding-left: 25px;
}

.padding-lr-xs,.padding-lr-top-5 {
  padding-left: 5px;
  padding-right: 5px;
}

.padding-lr-sm,.padding-lr-top-10 {
  padding-left: 10px;
  padding-right: 10px;
}

.padding-lr,.padding-lr-top-15 {
  padding-left: 15px;
  padding-right: 15px;
}

.padding-lr-lg,.padding-lr-top-20 {
  padding-left: 20px;
  padding-right: 20px;
}

.padding-lr-xl,.padding-lr-top-25 {
  padding-left: 25px;
  padding-right: 25px;
}

.padding-tb-xs,.padding-tb-top-5 {
  padding-top: 5px;
  padding-bottom: 5px;
}

.padding-tb-sm,.padding-tb-top-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.padding-tb,.padding-tb-top-15 {
  padding-top: 15px;
  padding-bottom: 15px;
}

.padding-tb-lg,.padding-tb-top-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.padding-tb-xl,.padding-tb-top-25 {
  padding-top: 25px;
  padding-bottom: 25px;
}

/* -- 浮动 --  */

.cf::after, .cf::before,.clear::after, .clear::before {
  content: " ";
  display: table;
}

.cf::after,.clear::after {
  clear: both;
}

.fl {
  float: left;
}

.fr {
  float: right;
}


.radius {
  border-radius: 3px;
}
.response {
  width: 100%;
}